<template>
  <div class="application">
    <TopSubfield></TopSubfield>
    <div class="top-banner">
      <p class="dsc-1">企业服务风口已来，七多多亿元巨资扶植代理商</p>
      <p class="dsc-2">
        七多多代理商
        <span>移动品牌营销服务专家</span>
      </p>
      <p class="dsc-3">硬产品，刚需求，携手共赢，有你七多多！</p>
      <router-link to="/directions" class="btn-vote btn-banner">立即申请</router-link>
    </div>
    <div class="container">
      <div class="tabber-content">
        <section class="fuwu-section">
          <ul class="privilege clearfix">
            <li v-for="(item,index) in data1" :key="index">
              <h2>{{item.h2}}</h2>
              <p>{{item.p1}}</p>
              <p>{{item.p2}}</p>
            </li>
          </ul>
        </section>
        <section class="fuwu-section">
          <h1>成为七多多代理商的优势</h1>
          <div class="advantages">
            <p>选择成为国内移动商城领先品牌的合作伙伴</p>
            <p>收获海量的商家资源</p>
            <p>丰厚的代理销售返利</p>
            <p>超预期的增值服务收入空间</p>
            <p>依托七多多成长为区域明星互联网公司</p>
          </div>
        </section>
        <section class="fuwu-section">
          <h1>成为七多多代理商的基础条件</h1>
          <ul class="condition clearfix">
            <li>
              <h2>具备公司资质</h2>
            </li>
            <li>
              <h2>能快速组建负责七多多业务开展的销售和服务团队</h2>
            </li>
            <li>
              <h2>在目标代理区域有良好的客户资源和人脉资源，具备快速拓展当地市场的基础条件，执行力强</h2>
            </li>
            <li>
              <h2>认同七多多的经营理念并愿意接受统一培训指导，能积极配合七多多总部开展营销服务活动</h2>
            </li>
          </ul>
        </section>
        <section class="fuwu-section">
          <h1>如何成为七多多代理商</h1>
          <ul class="steps">
            <li>提交申请资料</li>
            <li>渠道经理线下审核</li>
            <li>洽谈合作方案</li>
            <li>与七多多签订合作协议</li>
          </ul>
        </section>
      </div>
      <section class="fuwu-section">
          <router-link to="/directions" target="_blank" class="btn-vote">立即申请</router-link>
      </section>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
import TopSubfield from "@/components/top/TopSubfield";
import Footer from "@/components/bottom/footer";
export default {
  name: "application",
  components: {
    TopSubfield,
    Footer
  },
  data(){
      return{
          data1:[
              {
                h2:'服务市场展示特权',
                p1:'服务市场焦点区域展示和独立',
                p1:'形象主页展示'
              },
              {
                h2:'提供商户资源',
                p1:'七多多商户运营帮助推荐需要服',
                p1:'务的、付费意愿强的商户',
              },
              {
                h2:'广告位流量曝光',
                p1:'七多多平台商家后台核心页面的',
                p1:'广告位曝光',
              },
              {
                h2:'付费产品的销售特权',
                p1:'销售七多多相关产品可获得不低',
                p1:'于20%返点',
              },
              {
                h2:'官方提供的产品培训',
                p1:'高阶封闭式市场销售集训服务',
              },
              {
                h2:'市场公关推广服务',
                p1:'通过推广活动，协助代理商提',
                p1:'升在当地的知名度以及影响力',
              },
              {
                h2:'七多多品牌价值授权',
                p1:'给予七多多品牌，官方标识，物',
                p1:'料授权的许可',
              },
              {
                h2:'七多多VIP服务',
                p1:'区域经理一对一，VIP级服务',
              }
          ]
      }
  }
};
</script>

<style lang="less" scoped>
.application {
  .top-banner {
    text-align: center;
    height: 500px;
    background: url("../../../../static/images/zhaoshang_banner_0316.png");
    background-size: auto 500px;
    background-position: center;
    .dsc-1 {
      padding-top: 110px;
      font-size: 36px;
      line-height: 36px;
      color: #ffffff;
      font-weight: 100;
    }
    .dsc-2 {
      font-size: 46px;
      line-height: 65px;
      color: #ea2300;
      margin: 15px 0;
      display: inline-block;
      border: 1px solid #ea2300;
      border-left: none;
      border-right: none;
    }
    .dsc-3 {
      font-size: 28px;
      line-height: 35px;
      color: #ffffff;
      font-weight: 100;
    }
    .btn-banner {
      margin-top: 70px;
    }
    .btn-vote {
      display: inline-block;
      padding: 14px 39px;
      background-color: #ec2400;
      color: #fff;
      font-size: 28px;
      border-radius: 3px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      text-decoration: none;
    }
  }
  .container {
    width: 76%;
    padding-left: 12%;
    padding-bottom: 5%;
    border: 1px slid red;
    .clearfix {
      zoom: 1;
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    .fuwu-section {
      text-align: center;
      padding-top: 80px;
    }
    .fuwu-section h1,
    .fuwu-section h2 {
      font-weight: bold;
      color: #333;
    }
    .fuwu-section h1 {
      margin-bottom: 40px;
      font-size: 18px;
    }
    .fuwu-section h2 {
      margin-bottom: 6px;
      font-size: 16px;
    }
    .fuwu-section p {
      line-height: 19px;
      color: #999;
      font-size: 14px;
      font-weight: 200;
    }
    .fuwu-section .privilege li {
      width: 245px;
      height: 290px;
      margin: 0 40px 40px 0;
      float: left;
      background-repeat: no-repeat;
      background-size: 140px;
      background-position: center 30px;
      background-color: #fff;
      padding-top: 185px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .fuwu-section .privilege li:nth-child(4n) {
      margin-right: 0;
    }
    .fuwu-section .privilege li:nth-child(1) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_01.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(1) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_01@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(2) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_02.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(2) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_02@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(3) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_03.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(3) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_03@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(4) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_04.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(4) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_04@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(5) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_05.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(5) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_05@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(6) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_06.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(6) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_06@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(7) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_07.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(7) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_07@2x.png");
      }
    }
    .fuwu-section .privilege li:nth-child(8) {
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_08.png");
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .fuwu-section .privilege li:nth-child(8) {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/zhaoshang_privilege_08@2x.png");
      }
    }
    .fuwu-section .condition li {
      text-align: left;
      width: 503px;
      height: 100px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
      float: left;
      position: relative;
      margin: 0 34px 20px 30px;
      padding: 25px 20px 0 45px;
      line-height: 50px;
    }
    .fuwu-section .condition li:before {
      width: 60px;
      line-height: 60px;
      text-align: center;
      display: block;
      background-color: #5d6cf3;
      font-size: 36px;
      color: #fff;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: -30px;
      margin-top: -30px;
    }
    .fuwu-section .condition li:nth-child(1):before {
      content: "01";
    }
    .fuwu-section .condition li:nth-child(2) {
      margin-right: 0;
    }
    .fuwu-section .condition li:nth-child(2):before {
      content: "02";
    }
    .fuwu-section .condition li:nth-child(3) {
      line-height: 25px;
    }
    .fuwu-section .condition li:nth-child(3):before {
      content: "03";
    }
    .fuwu-section .condition li:nth-child(4) {
      margin-right: 0;
      line-height: 25px;
    }
    .fuwu-section .condition li:nth-child(4):before {
      content: "04";
    }
    .fuwu-section .steps {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
    }
    .fuwu-section .steps li {
      padding: 0 30px;
      background-color: #5d6cf3;
      display: inline-block;
      line-height: 80px;
      margin-right: 60px;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
    .fuwu-section .steps li:before {
      content: "";
      width: 0;
      height: 0;
      border-bottom: 80px solid #5d6cf3;
      border-left: 30px solid transparent;
      position: absolute;
      top: 0;
      left: -30px;
    }
    .fuwu-section .steps li:after {
      content: "";
      width: 0;
      height: 0;
      border-top: 80px solid #5d6cf3;
      border-right: 30px solid transparent;
      position: absolute;
      top: 0;
      right: -30px;
    }
    .fuwu-section .steps li:first-child {
      padding-left: 29px;
    }
    .fuwu-section .steps li:first-child:before {
      display: none;
    }
    .fuwu-section .steps li:last-child {
      padding-right: 29px;
      margin-right: 0;
    }
    .fuwu-section .steps li:last-child:after {
      display: none;
    }
    .btn-vote {
      display: inline-block;
      padding: 14px 39px;
      background-color: #ec2400;
      color: #fff;
      font-size: 28px;
      border-radius: 3px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    .btn-vote:hover {
      color: #fff;
      background-color: #f80000;
    }
    .btn-vote:active {
      background-color: #ec2400;
    }
    .advantages {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 30px 50px;
      background: #fff;
    }
    .advantages p {
      width: 33.33%;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      text-align: left;
      line-height: 50px;
    }
    .advantages p::before {
      content: "";
      background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/check.png");
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 10px;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min--moz-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      .advantages p::before {
        background-image: url("https://b.yzcdn.cn/v2/image//intro/fuwu/check@2x.png");
        background-size: 14px;
      }
    }
  }
}
</style>
